<template>
	<div id="index">
		<a-layout>
			<a-config-provider :locale="language">
				<a-layout-header>
					<div id="topbar">
						<topBar @loginVisibleShow="getloginData" @registerVisibleShow="getregisterData" :isSearchPage="false">
						</topBar>
					</div>
				</a-layout-header>
				<a-layout-header>
					<div id="evaluating">
						<a-layout>
							<a-layout>
								<div id="tab-bar">
									<a-space size="large">
										<a-tabs :active-key="currentKey" :animation="true" @tab-click="getTab">
											<a-tab-pane :key="index" v-for="(item,index) in chosenList">
												<template #title>
													<span class="tabs-font" :class="{'actived':currentKey == index}">
														{{item}}
													</span>
												</template>
											</a-tab-pane>
										</a-tabs>
									</a-space>
								</div>
								<router-view @getCartGoodStatus="getCartGood"></router-view>
							</a-layout>
						</a-layout>
					</div>
				</a-layout-header>
				<a-layout-footer>
					<a-back-top :visible-height="50" style="transform: translate(22%,40%);" />
				</a-layout-footer>
			</a-config-provider>
		</a-layout>
	</div>
</template>

<script setup>
	import {
		ref,
		reactive,
		getCurrentInstance,
		onMounted,
		provide,
		nextTick
	} from 'vue';

	//国际化组件
	import enUS from '@arco-design/web-vue/es/locale/lang/en-us';
	import zhCN from '@arco-design/web-vue/es/locale/lang/zh-cn';

	import topBar from '@/components/index/topBar.vue';

	let {
		proxy
	} = getCurrentInstance();

	import {
		useRouter
	} from 'vue-router';
	import {
		useRoute
	} from 'vue-router';
	let router = useRouter();
	let route = useRoute();
	
	const emit = defineEmits();

	let language = ref(zhCN);

	let loginformVisible = ref(false);
	let registerformVisible = ref(false);

	let chosenList = reactive(['单品', '系列', '厂商','视频']);
	let currentKey = ref('0');
	
	function changeLanguage() {
		console.log('当前语言', language.value);
		if (language.value.locale != '' && language.value.locale != null && language.value.locale == 'zh-CN') {
			language.value = enUS;

			proxy.$i18n.locale = 'en';
		} else {
			language.value = zhCN;

			proxy.$i18n.locale = 'zh';
		}
		console.log('切换后语言', language.value);
	}

	function changeThemeColor() {
		if (document.body.getAttribute('arco-theme') == 'dark') {
			document.body.removeAttribute('arco-theme');
			document.documentElement.style.setProperty('--color-content', '#fcfcfc');
			document.documentElement.style.setProperty('--color-content-a', '#4c4c4c');
			document.documentElement.style.setProperty('--color-font', '#4c4c4c');

		} else {
			document.body.setAttribute('arco-theme', 'dark');
			document.documentElement.style.setProperty('--color-content', '#4c4c4c');
			document.documentElement.style.setProperty('--color-content-a', '#f4f4f4');
			document.documentElement.style.setProperty('--color-font', '#f4f4f4');
		}
	}

	function getTab(key) {
		console.log('key', key);
		console.log('chosen', chosenList[key])
		currentKey.value = key;
		switch (chosenList[key]) {
			case '单品':
				router.push({
					path: '/modelDetail/goods/'+ route.params.id
				});
				break;
			case '系列':
				router.push({
					path: '/modelDetail/series/'+ route.params.id
				});
				break;
			case '厂商':
				router.push({
					path: '/modelDetail/firm/'+ route.params.id
				});
				break;
			case '视频':
				router.push({
					path: '/modelDetail/relateVideo/'+ route.params.id
				});
				break;
		}
	}

	function tabTextChange() {
		console.log('tab', route.meta.tab);
		if (route.meta.tab) {
			currentKey.value = route.meta.tab;
		}
	}

	function getloginData(data) {
		loginformVisible.value = data;
		console.log('loginVisable', data);
	}

	function getregisterData(data) {
		registerformVisible.value = data;
		console.log('registerVisable', data);
	}
	
	let addCartGoodStatus = ref(false);
	provide('flushShoppingCart',addCartGoodStatus);
	//获取添加商品的状态
	function getCartGood(data){
		console.log('status',data);	
		addCartGoodStatus.value = data;
	}
	
	onMounted(() => {
		console.log('modelDetail的onMounted执行了');
		document.documentElement.style.setProperty('--color-content', '#f4f4f4');
		document.documentElement.style.setProperty('--color-font', 'gray');
		console.log('env',
			import.meta.env);
		tabTextChange();
	});
</script>

<style lang="less" scoped>
	@import '@/assets/modelDetail/css/index.less';
</style>
